<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button{
            position: fixed;
            right: 100px;
            bottom: 100px;
            display: none;
        }
        body{
            height: 2000px;
        }
    </style>
</head>
<body>
    <h1>hello,world</h1>
    <button>↑</button>
    <script>
        // let timer=null
        let button = document.querySelector("button")
        button.onclick=function(){
            window.scrollTo(0,0);
        }
        // window.onscroll=function(){
        //     if(timer!=null){
        //         clearTimeout(timer);
        //     }
        //     timer=setTimeout(() => {
        //     // console.log("hello,world");
        //     console.log("计数器")
        //     if(document.documentElement.scrollTop>0){
        //         button.style.display="block";
        //     }
        //     else{
        //         button.style.display="none"
        //     }
        //     timer=null
        //     }, 500);
        // }
        //利用闭包封装防抖算法
        // function debounce(fn){
        //     let timer=null
        //     function eventFun(){
        //         // console.log("hello,world")
        //         if(timer!==null)
        //         {
        //             clearTimeout(timer)
        //         }
        //         timer=setTimeout(() => {
        //             //业务代码
        //             fn()
        //             timer=null
        //         }, 500);
        //     }
        //     return eventFun
        // }

        //节流
        function throttle(fn){
            let mark=true
            return function(){
                if(mark)
                {
                    setTimeout(() => {
                        fn()
                        mark=true
                    }, 500);
                    mark=false
                }
            }
        }
        window.onscroll=throttle(()=>{
            console.log("计数器")
            if(document.documentElement.scrollTop>0){
                button.style.display="block";
                }
            else{
                    button.style.display="none"
                }
            });
    </script>
</body>
</html>